<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p ref="p">{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <hr>
        <p>{{$a}}</p>
        <p>{{$b}}</p>
        <p>{{both}}</p>
    </div>
</body>
<script>
    let {createApp,nextTick,getCurrentInstance} = Vue;
    let {ref,reactive,readonly,computed,watch} = Vue;
    let {isRef,isReactive,isProxy,isReadonly} = Vue;
    let {shallowRef,shallowReactive,triggerRef} = Vue;
    let {unref} = Vue;

    // Vue2中  可以通过给构造函数Vue的原型对象配置全局属性(Vue.prototype.xxx ) 从而允许所有的实例可以访问这些属性
    // Vue.prototype.$axios =axios
    // Vue.prototype.$get =axios.get
    // Vue.prototype.$post =axios.post
    // Vue.prototype.$message = Message;

    // Vue3中 需要给根实例配置 app.config.globalProperties   => 从而允许所有的实例可以访问这些属性
    // 1. 在模板直接对应属性名访问,在选项式语法中 => 直接通过this(代理对象访问)   => 用法同vue2
    // 2. 在组合式语法中 => 需要通过当前实例访问 getCurrentInstance()  

    // app.config.globalProperties.$a = 1;
    // app.config.globalProperties.$b = 2;



    var app = createApp({
        
        setup(props) {

            let count = ref(100);
            let addCount = ()=>{
                count.value ++;
            }

            let app = getCurrentInstance();

            // 获取全局属性/方法
            let {$a,$b} = app.appContext.config.globalProperties;

            let {ctx} = app;  // 获取当前实例的代理数据 -> 此时数据还没存,只能使用代理中的方法($emit $forceUpdate $nextTick $parent $root $watch)
            console.log(ctx);

            console.log("app",app);
            console.log("$a,$b",$a,$b);

            let both = computed(()=>{
                return $a + $b;
            })

        


            return {
                both,
                count,
            }
            
        },
        mounted() {
            // console.log("this",this);
            // console.log(this.$a,this.$b);

            // 选项式语法
            // 组件挂载完毕 开启监听 => 监听count 
            this.$watch("count",function(newVal,oldVal){
                console.log("count修改了",newVal,oldVal);
            })

            this.$watch(()=>this.count * 2,function(newVal,oldVal){
                console.log("doubleCount修改了",newVal,oldVal);
            })


        },
        watch:{
            count:function(newVal,oldVal){
                console.log("count修改了",newVal,oldVal);
            }
        }
        
    })

    app.config.globalProperties.$a = 1;
    app.config.globalProperties.$b = 2;

    app.mount("#app");








</script>
</html>